import { logout } from "@/store/modules/user";
import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
import { Button } from "antd";
import { Header } from "antd/es/layout/layout";
import { FC } from "react";
import { useDispatch } from "react-redux";
interface HeaderLayoutProps {
  collapsed: boolean;
  setCollapsed: (collapsed: boolean) => void;
}
const HeaderLayout: FC<HeaderLayoutProps> = ({ collapsed, setCollapsed }) => {
  const dispatch = useDispatch();
  return (
    <>
      <Header
        style={{
          padding: "0 20px",
          backgroundColor: "#fff",
          display: "flex",
          justifyContent: "space-between",
          alignItems: "center",
        }}
      >
        <Button
          type="text"
          icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
          onClick={() => setCollapsed(!collapsed)}
          style={{
            fontSize: "16px",
            width: 64,
            height: 64,
          }}
        />
        <Button onClick={() => dispatch(logout())} size="large" type="primary">
          退出登录
        </Button>
      </Header>
    </>
  );
};
export default HeaderLayout;
